import deepcopy from "deepcopy";
import { defineComponent, inject, ref,watch } from "vue";

export default defineComponent({
  props: {
    modelValue: Array,
    isInspect:Boolean
  },
  emits: ["update:modelValue"],
  setup(props, ctx) {
    const config = inject("configList");

    let randomId = Math.random().toString(36).substr(2);
    let itemName = '项目'
    // console.log(789, props.isInspect);
    
    const reset =()=>{
      // console.log('watch生效',props.isInspect);
      
      if(props.isInspect!==undefined){
        itemName = '检查项'
      }else{
        itemName = '项目'
      }
    }

    watch(() => props.isInspect, reset, { immediate: true });
    console.log(789, props.modelValue.value);
    // props.modelValue.value=[]
    if (props.modelValue == undefined || props.modelValue.value.length == 0) {
      props.modelValue.value = [];
      props.modelValue.value.push({
        id: randomId + "1", //唯一标识
        label: `${itemName}1`, //row label
        value: "", //row value
      });
      props.modelValue.value.push({
        id: randomId + "2", //唯一标识
        label: `${itemName}2`, //row label
        value: "", //row value
      });
    }

    // console.log(888,props.modelValue.value);

    const addLine = (index) => {
      let randomId = Math.random().toString(36).substr(2);
      props.modelValue.value.push({
        id: randomId + (index + 2).toString(), //唯一标识
        label: itemName + (index + 2).toString(), //row label
        value: "", //row value
      });
    };

    return () => {
      return props.modelValue.value.map((item, index) => {
        return (
          <>
            <div style={{ width: "100%" }}>
              <ElInput
                style={{ width: "100%" }}
                v-model={item.label}
                clearable
                maxlength={6}
              ></ElInput>
            </div>
            {/*todo 优化hover */}
            {index == props.modelValue.value.length - 1 && (
              <div
                onClick={() => {
                  addLine(index);
                }}
                className="table-right"
                style={{ color: "var(--primary-main-color)" }}
              >
                添加行
              </div>
            )}
          </>
        );
      });
    };
  },
});
